<template>
	<view>
		<view class="positopbgc"></view>
		<u-navbar title="首页" bgColor="rgba(0,0,0,0)" safeAreaInsetTop placeholder>
			<view class="flexleft" slot="left" @click="jumpurl('/pages_index/fillInfo','')">
				<text class="xiaohei">{{cityInfo.region[1] || "选城市"}}/{{njInfo.id?njInfo.name:"选年级"}}</text>
				<u-icon name="arrow-down-fill" color="#000" size="12"></u-icon>
			</view>
		</u-navbar>
		<u-sticky>
			<view class="mainpadding" style="position: relative; z-index: 2;">
				<view class="ffffff flexbetween ssbox">
					<view class="flexleft">
						<u-icon name="search" color="#999" size="20"></u-icon>
						<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold">
					</view>
					<view class="rightss">搜索</view>
				</view>
			</view>
			<u-tabs :list="list1" :current="currentlist" lineWidth="0" :activeStyle="{
		        color: '#3478f5',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		    }" @change="tabclick"></u-tabs>
		</u-sticky>
		<view class="flexcolumn" v-if="!njInfo.id">
			<view class="placeholderimage"></view>
			<view class="margin_top xiaohui">点击左上角选择年级，选择完之后可查看详细内容！</view>
		</view>
		<view class="flexcolumn" v-if="!dataAllmsg">
			<view class="placeholderimage"></view>
			<view class="margin_top xiaohui">该城市没用对应数据！</view>
		</view>
		
		<scroll-view scroll-y="true" style="position: relative; z-index: 2; height: calc(100vh - 420rpx);" v-if="njInfo.id && dataAllmsg">
			<template v-if="kslist.length">
				<uni-data-picker @change="bindPickerChange" :localdata="kslist"
					popup-title="选择课时" v-model="ksmsg.id">
					<view class="flexbetween margin_top mainpadding2">
						<view class="xiaolan">{{ksmsg.id?ksmsg.ks_text:'选择课时'}}</view>
						<u-icon name="arrow-right" color="#3478f5" size="12"></u-icon>
					</view>
				</uni-data-picker>
			</template>
			<view class="mainpadding">
				<!-- 优课 -->
				<view class="flexbetween" @click="jumplist(1)">
					<view class="flexleft">
						<view class="line"></view>
						<view class="titletext margin_left1 bold hei_text">优课</view>
					</view>
					<view class="xiaolan flexright">
						<view class="xiaolan margin_right1">查看全部</view>
						<u-icon name="arrow-right" color="#3478f5" size="12"></u-icon>
					</view>
				</view>
				<view class="flexbetween flex_wrap">
					<view class="itemgoods ffffff radius margin_top" v-for="item in dataAll.lesson_1" :key="item.id" @click="jumpurl('/pages_index/youkexq?id=',item.id)">
						<image :src="item.image_text" class="goodstopimg" mode=""></image>
						<view class="" style="padding: 30rpx 15rpx;">
							<view class="main_size hei_text bold xiankuan">{{item.name}}</view>
							<view class="flexbetween margin_top2">
								<view class="viplable" v-show="item.is_vip">vip</view>
								<view class="bianhao">编号：{{item.id}}</view>
							</view>
							<view class="flexbetween margin_top2">
								<view class="flexleft">
									<image :src="item.teacher.avatar" mode="" class="listheadimg"></image>
									<view class="xiaohei xiankuan margin_left1" style="width: 80rpx;">{{item.teacher.username}}</view>
								</view>
								<view class="xiaohong">￥{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 辅导 -->
				<view class="flexbetween margin_top" @click="jumplist(2)">
					<view class="flexleft">
						<view class="line"></view>
						<view class="titletext margin_left1 bold hei_text">辅导</view>
					</view>
					<view class="xiaolan flexright">
						<view class="xiaolan margin_right1">查看全部</view>
						<u-icon name="arrow-right" color="#3478f5" size="12"></u-icon>
					</view>
				</view>
				<view class="mainpadding_top ffffff radius" v-for="item in dataAll.lesson_2" :key="item.id"  @click="jumpurl('/pages_index/fudaoxq?id=',item.id)">
					<view class="yihang hei_text bold main_size">{{item.name}}</view>
					<view class="flexleft margin_top2">
						<view class="viplable margin_right" v-show="item.is_vip">vip</view>
						<view class="bianhao">编号：{{item.id}}</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<image :src="item.teacher.avatar" mode="" class="listheadimg"></image>
							<view class="xiaohei margin_left1">{{item.teacher.username}}</view>
						</view>
						<view class="xiaohong">￥{{item.price}}</view>
					</view>
				</view>
				<!-- 测试 -->
				<view class="flexbetween margin_top" @click="jumplist(3)">
					<view class="flexleft">
						<view class="line"></view>
						<view class="titletext margin_left1 bold hei_text">测试</view>
					</view>
					<view class="xiaolan flexright">
						<view class="xiaolan margin_right1">查看全部</view>
						<u-icon name="arrow-right" color="#3478f5" size="12"></u-icon>
					</view>
				</view>
				<view class="mainpadding_top ffffff radius" v-for="item in dataAll.lesson_3" :key="item.id" @click="jumpurl('/pages_index/ceshixq?id=',item.id)">
					<view class="yihang hei_text bold main_size">{{item.name}}</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft ">
							<view class="viplable margin_right" v-show="item.is_vip">vip</view>
							<view class="bianhao">编号：{{item.id}}</view>
						</view>
						<view class="xiaohong">￥{{item.price}}</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<image :src="item.teacher.avatar" mode="" class="listheadimg"></image>
							<view class="xiaohei margin_left1">{{item.teacher.username}}</view>
						</view>
						<view class="listbtnlan" v-if="!item.is_free" @click.stop="kecheng_pay(item.id)">立即购买</view>
						<view class="listbtnlan" v-else @click="jumpurl('/pages_mine/ceshitjq?id=',item.id)">立即考试</view>
					</view>
				</view>
				<!-- 资料 -->
				<view class="flexbetween margin_top" @click="jumplist(4)">
					<view class="flexleft">
						<view class="line"></view>
						<view class="titletext margin_left1 bold hei_text">资料</view>
					</view>
					<view class="xiaolan flexright">
						<view class="xiaolan margin_right1">查看全部</view>
						<u-icon name="arrow-right" color="#3478f5" size="12"></u-icon>
					</view>
				</view>
				<view class="mainpadding_top ffffff radius" v-for="item in dataAll.lesson_4" :key="item.id"  @click="jumpurl('/pages_index/ziliaoxq?id=',item.id)">
					<view class="yihang hei_text bold main_size">{{item.name}}</view>
					<view class="flexleft margin_top2">
						<view class="viplable margin_right" v-show="item.is_vip">vip</view>
						<view class="bianhao">编号：{{item.id}}</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<image :src="item.teacher.avatar" mode="" class="listheadimg"></image>
							<view class="xiaohei margin_left1">{{item.teacher.username}}</view>
						</view>
						<view class="xiaohong">￥{{item.price}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				tabsId:"",
				currentlist:0,
				cityInfo:{},//本地存储的城市信息
				njInfo:{},//本地存储的年级信息
				kslist:[],//课时
				ksmsg:{//选择的课时信息
					ks_text:"",
					pid:"",//大分类id
					id:"",
				},
				dataAll:{},
				dataAllmsg:true,//当前所选城市年级是否存在数据
			}
		},
		onLoad() {
			if (httpRequest.checkIsLogin()) {
				let cityInfo = uni.getStorageSync("cityInfo")
				if(cityInfo){
					this.getcityInfo()
					
				}else{
					this.getInfo()
				}
			}
			this.getNjinfo()
		},
		onShow() {
			uni.$off("changenj")
			uni.$on("changenj",data=>{//年级发生改变做出相应操作
				this.getNjinfo()
				this.getcityInfo()
			})
		},
		methods: {
			kecheng_pay(id) {
				httpRequest.request('/api/lesson/create_order', 'POST', {
					education_lesson_id: id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let data = {
							pay_price: res.data.pay_price,
							order_id: res.data.order_id
						}
						uni.redirectTo({
							url: '/pages_index/kechengddzf?msg=' + encodeURIComponent(JSON
								.stringify(data))
						})
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getInfo(){//获取本地选择的城市
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					uni.setStorageSync("cityInfo",{
						region:res.data.region,
						province:res.data.province,
						city:res.data.city
					})
					this.cityInfo = {
						region:res.data.region.split('/'),
						province:res.data.province,
						city:res.data.city
					}
				})
			},
			getcityInfo(){
				let cityInfo = uni.getStorageSync("cityInfo")
				cityInfo.region = cityInfo.region.split('/')
				this.cityInfo = cityInfo
			},
			getNjinfo(){//获取本地选择的年级
				let njInfo = uni.getStorageSync("njInfo")
				if(njInfo){
					this.njInfo = njInfo
					this.getXkList()
				}else{
					this.njInfo = {
						name:"",
						id:"",
						period:"",
					}
				}
			},
			getXkList(){//获取学科数据
				httpRequest.request('/api/index/getsubject', 'GET', {
					education_grade_id:this.njInfo.id,
					period:this.njInfo.period,
					city:this.cityInfo.city
				}).then(res => {
					this.currentlists = 0
					this.list1 = []
					this.tabsId = ""
					if(res.data.length){
						this.list1 = JSON.parse(JSON.stringify(res.data))
						this.tabsId = res.data[0].id
						this.getks()
					}
					this.init()
				})
			},
			tabclick(item) {
				this.tabsId = item.id
				this.ksmsg = {
					ks_text:"",
					pid:"",//大分类id
					id:"",
				}
				this.getks()
				this.init()
			},
			getks(){//获取课时数据
				httpRequest.request('/api/index/getclasshour', 'GET', {
					education_grade_id:this.njInfo.id,
					period:this.njInfo.period,
					city:this.cityInfo.city,
					education_subject_id:this.tabsId
				}).then(res => {
					res.data.forEach(item=>{
						this.$set(item,"text","")
						this.$set(item,"value","")
						item.text = item.name
						item.value = item.id
						item.children.forEach(ite=>{
							this.$set(ite,"text","")
							this.$set(ite,"value","")
							ite.text = ite.name
							ite.value = ite.id
						})
					})
					this.kslist = res.data
				})
			},
			init(){//获取首页数据内容
				httpRequest.request('/api/index/index', 'GET', {
					education_grade_id:this.njInfo.id,
					period:this.njInfo.period,
					city:this.cityInfo.city,
					education_subject_id:this.tabsId,
					education_classhour_id:this.ksmsg.id//课时子id
				}).then(res => {
					if(res.code==1){
						this.dataAll = res.data
						this.dataAllmsg = true
					}else{
						this.dataAll = {}
						this.dataAllmsg = false
					}
				})
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.ksmsg.ks_text = area[0].text+"/"+area[1].text;
				this.ksmsg.pid = area[0].value;
				this.ksmsg.id = area[1].value;
				this.init()
			},
			jumpurl(url,id){
				if(id==""){
					if (!httpRequest.checkIsLogin()) {
						uni.navigateTo({
							url: "/pages/login/login"
						})
						return false
					}
				}
				uni.navigateTo({
					url:url+id
				})
			},
			jumplist(val){
				let data = {
					type:val,//分类1=优课,2=辅导,3=测试,4=资料
					city:this.cityInfo.city,//城市
					education_grade_id:this.njInfo.id,//年级id
					period:this.njInfo.period,//学段1=小学,2=初中,3=高中,4=大学
					education_subject_id:this.tabsId,//学科id
					education_classhour_id:this.ksmsg.id//课时子id
				}
				uni.navigateTo({
					url:"/pages_index/listPage?data=" + encodeURIComponent(JSON.stringify(data))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-sticky.data-v-c187ecf2 {
		z-index: 1 !important;
	}
</style>